<template>
  <div class="homePage">
    <div class="top">
      <div class="topOne">
        <avue-data-tabs :option="option"></avue-data-tabs>
      </div>
      <div class="topTWO">
        <div class="iteminfo" :style="{width: '100%', height: '80%'}" id="chart1">
        </div>
      </div>
    </div>

    <div class="center">
      <div class="centerLeft" style="margin-left: 15px">
        <dv-scroll-board v-if="isKEY" :config="centerOneData" style="width:500px;height:350px"/>
      </div>
      <div class="centerRight">
        <el-date-picker
          v-model="value1"
          @change="timeChange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd">
        </el-date-picker>
        <div class="iteminfo" :style="{width: '100%', height: '80%'}" id="chart2">
        </div>
      </div>

    </div>
    <div class="bottom">

      <div class="iteminfo" :style="{width: '100%', height: '80%'}" id="chart3">
      </div>

    </div>
  </div>

</template>

<script>
import {mapGetters} from 'vuex'
import * as u from '@/utils/util'
import * as echarts from 'echarts';
import {doMd5} from "@/utils/util";

export default {
  name: 'index',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      from: "",
      option: {
        span: 8,
        data: [
          // {
          //   title: '分类统计',
          //   subtitle: '实时',
          //   count: 7993,
          //   allcount: 10222,
          //   text: '当前分类总记录数',
          //   color: 'rgb(27, 201, 142)',
          //   key: '类'
          // }
        ]
      },
      topTwoData: [],
      centerOneData: {
        header: ['', '', ''],
        headerBGC: "#eedd9f",
        oddRowBGC: "#7e336f",//基数颜色
        evenRowBGC: "#3c4867",//基数颜色
        data: [],
        index: true,
        columnWidth: [50],
        align: ['center']
      },
      centerTwoData: [],
      value1: ['', ''],
      isKEY: false,
      zhuData: [],
      zhuDescData: [],
      centerTwoDataDesc:[]
    }
  },
  created() {
    this.getCenterOne()
  },
  mounted() {
    this.getTopOne()
    this.getTopTwo()
    this.getCenterTwo()
    this.getBottom()
  },
  methods: {
    getTopOne() {
      this.$httpService.get('/yuanjiu.testnew/tn-index/getIndexCard').then(res => {
        res.forEach((x) => {
          x.title = x.idxName
          x.count = x.idxVal
          x.allcount = x.idxVal02
          x.color = 'rgba(4,36,147,0.94)'
        })
        this.option.data = res
      })

    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById('chart1'))
      // 绘制图表
      this.myChart.setOption({
        title: {
          text: '近一年各产品培训学员数量统计',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        grid: {
          top: '1%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          top: '5%',
          left: '80%'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.topTwoData
          }
        ]

      });
      let that = this
      // window.addEventListener('resize', () =>  that.myChart.resize(), false)
      // $(window).resize(function () {
      //   that.myChart.resize()
      // });
    },
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById('chart2'))
      // 绘制图表
      this.myChart.setOption({
        title: {
          text: '招生走势图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.centerTwoDataDesc
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '入学人数',
            type: 'line',
            stack: 'Total',
            data: this.centerTwoData
          },]
      });
    },
    drawLine3() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById('chart3'))
      // 绘制图表
      this.myChart.setOption({
//图名和备注信息
        title: {
          text: '',
          subtext: ''
        },
        //图例
        legend: {
          // data: this.zhuDescData
        },
        //指示显示相应的数据和标识,一般里面为空就行
        tooltip: {},


        xAxis: {
          type: 'category',
          data: this.zhuDescData
        },
        yAxis: [
          {name: '收入统计', gridIndex: 0},
          //{name:'amount',gridIndex: 1}
        ],
        //调整间距
        grid: [
          {bottom: '5%'},
          //{top: '55%'}
        ],
        series: [// 一组数据视图
          {
            data: this.zhuData,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }

        ]
      });
    },
    getTopTwo() {
      this.$httpService.get('/yuanjiu.testnew/tn-index/getPieChart').then(res => {
        // console.log('222', res)
        res.map((x) => {
          x.name = x.idxName
          x.value = x.idxVal
        })
        this.topTwoData = res
        this.drawLine()
      })

    },
    getCenterOne() {
      this.$httpService.get('/yuanjiu.testnew/tn-index/getSalesRanking').then(res => {
        res.forEach((x, v) => {
          let arr = []
          arr.push(res[v].idxName)
          arr.push(res[v].idxVal)
          arr.push(res[v].idxVal)
          this.centerOneData.data.push(arr)
        })
        this.isKEY = true
      })
    },
    getCenterTwo() {
      this.centerTwoData=[]
      this.$httpService.get('/yuanjiu.testnew/tn-index/getLineChart', {
        startDt: this.value1?this.value1[0]:'',
        endDt: this.value1?this.value1[1]:'',
      }).then(res => {
        // console.log('折线图33333', res)
        res.forEach((x) => {
          this.centerTwoData.push(x.idxVal)
          this.centerTwoDataDesc.push(x.dataDt)
        })
        this.drawLine2()
      })
    },
    timeChange() {
      // console.log(this.value1)
      this.getCenterTwo()
    },
    getBottom() {
      this.$httpService.post('/yuanjiu.testnew/tn-index/getHistogramChart',).then(res => {
        // console.log('bottom', res)
        res.forEach((x) => {
          this.zhuData.push(x.idxVal)
          this.zhuDescData.push(x.dataDt)
        })
        // console.log('this.zhuDescData', this.zhuDescData)
        this.drawLine3()
      })

    }
  },
  watch:{

  }
}
</script>

<style lang="scss" scoped>
.top {
  display: flex;

  .topOne {
    flex: 1;
    height: 390px;
    //background-color: wheat;
  }

  .topTWO {
    flex: 1;
    height: 390px;
    //background-color: rosybrown;
  }
}

.center {
  display: flex;

  .centerLeft {
    flex: 1;
    height: 390px;
    //background-color: wheat;
  }

  .centerRight {
    flex: 1;
    height: 390px;
    //background-color: wheat;
  }

}

.bottom {
  height: 500px;
}
</style>
